<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>浇水系统</title>
    <style>
        .rectangle {
            width: 60%;
            height: 80px;
            border: 1px solid;
            background-color: #38f87e;
            margin: 0 auto;
            display: flex;
            align-items: center;
            justify-content: center;
        }
        
        .text {
            font-size: 24px;
        }
        .container {
            display: flex;
            flex-direction: column;
            align-items: center;
            width: 60%;
            margin: 0 auto;
            border: 1px solid;
            background-color: #a8f5c4;
            margin-top: 10px;
            align-self: flex-start;
        }
        .settinglabel {
            margin-top: 10px;
            width: 90%;
            text-align: right;
            background-color: cornsilk;
        }
    </style>
    <script>
        // 在页面加载完成时执行读取缓存的动作
        window.onload = function() {
            setTimeout(get_plant_status, 3000);
        }
        function get_plant_settings() {
            document.getElementById('input_set').value = 0;
            document.getElementById('input_push_ip').value = 0;
            document.getElementById('input_push_period').value= 0;
            var xhr = new XMLHttpRequest();
            
            var get_url = "get?settings=0"
            console.log("get_url=", get_url)
            xhr.open("GET", get_url, true);
            xhr.onreadystatechange = function() {
                if (xhr.readyState === 4 && xhr.status === 200) {
                    var responseText = xhr.responseText;
                    var jsonObject = JSON.parse(responseText); // 解析 JSON 字符串为 JavaScript 对象
                    // var sssValue = jsonObject.设置; // 获取 "sss" 值
                    console.log("recv json=",responseText);

                    document.getElementById('input_set').value = jsonObject.set_hmdt;
                    document.getElementById('input_push_ip').value = jsonObject.push_ip;
                    document.getElementById('input_push_period').value= jsonObject.push_period;
                }
            };

            xhr.send();
        }
        function get_plant_status() {
            var xhr = new XMLHttpRequest();
            
            var get_url = "get?humidity=0";
            console.log("get_url=", get_url)
            xhr.open("GET", get_url, true);

            xhr.onreadystatechange = function() {
                if (xhr.readyState === 4 && xhr.status === 200) {
                    var responseText = xhr.responseText;
                    document.getElementById('label_id_st').innerHTML = responseText;
                    
                    var jsonObject = JSON.parse(responseText); // 解析 JSON 字符串为 JavaScript 对象
                    var sssValue = jsonObject.设置; // 获取 "sss" 值
                    console.log("设置=",sssValue);
                    input_set = document.getElementById('input_set');
                    input_set.value =  sssValue;
                }
            };

            xhr.send();
        }

        function set_act_val() {
            var inputval = document.getElementById("input_set");
            console.log("inputval=", inputval.value)
            if (inputval.value.trim() === "")
            {
                alert("设置不能为空");
            }
            else
            {
                var set_url = "/set?humidity="+inputval.value
                // console.log("set_url", set_url)
                var xhr = new XMLHttpRequest();
                xhr.open("GET", set_url, true);

                xhr.onreadystatechange = function() {
                    if (xhr.readyState === 4 && xhr.status === 200) {
                        var responseText = xhr.responseText;
                        console.log("设置返回结果=",responseText);
                        alert(responseText)
                    }
                };
                xhr.send();
            }

        }
        function set_dev_push_ip() {
            var inputval = document.getElementById("input_push_ip");
            console.log("inputval=", inputval.value)
            if (inputval.value.trim() === "")
            {
                alert("设置不能为空");
            }
            else
            {

                var set_url = "set?srvip="+inputval.value
                // console.log("set_url", set_url)
                var xhr = new XMLHttpRequest();
                xhr.open("GET", set_url, true);

                xhr.onreadystatechange = function() {
                    if (xhr.readyState === 4 && xhr.status === 200) {
                        var responseText = xhr.responseText;
                        console.log("设置返回结果=",responseText);
                        alert(responseText)
                    }
                };
                xhr.send();
            }

        }
        function set_dev_push_period() {
            var inputval = document.getElementById("input_push_period");
            console.log("inputval=", inputval.value)
            if (inputval.value.trim() === "")
            {
                alert("设置不能为空");
            }
            else
            {
                var set_url = "set?period="+inputval.value
                // console.log("set_url", set_url)
                var xhr = new XMLHttpRequest();
                xhr.open("GET", set_url, true);

                xhr.onreadystatechange = function() {
                    if (xhr.readyState === 4 && xhr.status === 200) {
                        var responseText = xhr.responseText;
                        console.log("设置返回结果=",responseText);
                        alert(responseText)
                    }
                };
                xhr.send();
            }

        }
    </script>
    <style>
        .my-button {
            width: 100px;
            height: 60px;
            margin-left: 10px;
        }
        .table1 {
        width: 100%;
        border-collapse: collapse;
        }
        
        .table1 th, .table1 td {
        border: 1px solid black;
        padding: 8px;
        }
        
        .table1 th:first-child, .table1 td:first-child {
        width: 80%;
        }
        
        .table1 th:last-child, .table1 td:last-child {
        width: 20%;
        }
    </style>
</head>
<body>
    <div class="rectangle">
        <span class="text">自动浇水系统</span>
        <br />
       
    </div>

    <div class="container">
        
        <div  class="settinglabel">
            <table class="table1">
                <tr>
                  <th>
                  <label id="label_id_st" " >当前无当前无当前无当前无当前无当前无当前无当前无任何状态,手动刷新</label>
                </th>
                  <th>
                    <button class="my-button" onclick="get_plant_status()">状态刷新</button>
                  </th>
                </tr>
            </table>
        </div>

        <div  class="settinglabel">
            <table class="table1">
                <tr>
                  <th>
                  浇水阈值100-700(越大越干燥):<br/>
                    <input type="text" id="input_set" width="150px" placeholder="400">
                </th>
                  <th>
                    <button class="my-button" onclick="set_act_val()">设置</button>
                  </th>
                </tr>
            </table>
        </div>
        <div  class="settinglabel">
            <table class="table1">
                <tr>
                  <th>
                    设备上报服务器IP:<br/>
                    <input type="text" id="input_push_ip" width="150px" placeholder="192.168.2.126">
                </th>
                  <th>
                    <button class="my-button" onclick="set_dev_push_ip()">设置</button>
                  </th>
                </tr>
            </table>
        </div>  
        <div  class="settinglabel">
            <table class="table1">
                <tr>
                  <th>
                    设备上报周期(最小60s):<br/>
            <input type="text" id="input_push_period" width="150px" placeholder="60">
                </th>
                  <th>
                    <button class="my-button" onclick="set_dev_push_period()">设置</button>
                  </th>
                </tr>
            </table>
        </div> 
        

        <div class="settinglabel" style="text-align: center;">
            
            <button class="my-button" onclick="get_plant_settings()">获取参数</button>
        </div>
    </div>
    <div class="container">
        <table style="border-collapse: collapse; width: 90%;">
            <tr>
              <td style="text-align: center;">author:bcg</td>
              <td style="text-align: center;">vx(qq):448251593</td>
              <td style="text-align: center;">ver: 1.1.5</td>
              <td style="text-align: center;">date:20230729</td>
            </tr>
          </table>
       
    </div>
</body>
</html>